<template>
  <div class="Throughpay">
    <c-title :hide="false" text="钱包"></c-title>
    <template v-if="info">
      <van-tabs v-model="active" @change="resrtTap">
        <van-tab :title="item.name" v-for="item in info" :key="item.name">
          <div class="payBox">
            <div class="spantxt">{{ item.name }}</div>
            <div class="price">{{ user_assets }}</div>
           <button v-if="item.open_recharge==1" class="pay-btn" @click="pay(item)">划转</button>
          </div>
        </van-tab>
      </van-tabs>
      <template v-if="active!==0">
        <van-tabs v-model="activeOne" >
          <van-tab title="明细记录"></van-tab>
        </van-tabs>
        <div class="list">
          <div class="lis" v-for="(item,index) in listData" :key="index">
            <div class="left">
              <div class="price">{{item.amount}}</div>
              <div class="typeTxt">{{item.category_name}}</div>
            </div>
            <div class="right">
              <div class="statusTxt ad">{{item.status_des}}</div>
              <div class="statusTxt">{{fun.timestampToTime(item.create_at)}}</div>
            </div>
          </div>
        </div>
      </template>
    </template>
  </div>
</template>
<script>
import { scrollMixin } from "../../utils/mixin"; //引入加载更多
export default {
  mixins: [scrollMixin],
  data() {
    return {
      info: [],
      active: 0,
      activeOne: 0,
      listData: [],
      user_assets:0,

      page: 1, //分页数，当前页数
      isLoadMore: true, //判断是否要加载更多的标志
      total_page: 0 //总页数
    };
  },
  activated() {
    this.getInfo();
  },
  methods: {
    pay(data){
      if(data.value == 0){
        this.$router.push(this.fun.getUrl("loveWithdrawals"))
      }else{
          this.$router.push(this.fun.getUrl("loveTransform",{value:this.active}))
      }
    },
    resrtTap(){
      this.init();
      this.getData();
    },
    init(){
      this.page = 1;
      this.isLoadMore = true;
      this.total_page = 0;
      this.listData = [];
    },
    getInfo() {
      $http.get("plugin.love-speed-pool.frontend.wallet.index", {}, "").then(res => {
        if (res.result != 1) {
          this.$toast(res.msg);
          return;
        }
        this.info = res.data.tabs;
        if (this.info) {
          this.getData();
        }
      });
    },
    getData() {
      console.log(this.info);
      let value = (this.active == 1) ? 1 : (this.active==2) ? 2:0;
      let json = {
        value,
        // value: this.info[this.active == 0 ? "currency_0" : "currency_2"].value,
        page: this.page
      };
      $http.get("plugin.love-speed-pool.frontend.wallet.getValueData", json, "").then(res => {
        if (res.result != 1) {
          this.$toast(res.msg);
          return;
        }
        this.isLoadMore = true;
        this.total_page = res.data.records.last_page;
        if (!this.total_page) {
          this.total_page = 0;
        }
        this.user_assets = res.data.user_assets;
        this.listData = res.data.records.data;
      });
    },
    //加载更多数据
    getMoreData() {
      this.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        // that.loading = true;
        return;
      } else {
        this.page += 1;
        let json = { value: this.info[this.active == 0 ? "currency_1" : "currency_2"].value, page: this.page };
        $http.get("plugin.love-speed-pool.frontend.wallet.getValueData", json).then(res => {
          console.log(res);
          this.isLoadMore = true;
          if (res.result === 1) {
            var nextPageData = res.data.records.data;
            this.listData = this.listData.concat(nextPageData);
          } else {
            this.page = this.page - 1;
            this.isLoadMore = false;
            console.log(res.msg);
          }
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.Throughpay {
  background: #fff;
}

.pay-btn {
  position: absolute;
  right: 1.25rem;
  top: 2.5rem;
  width: 4.375rem;
  height: 2.1875rem;
  border: none;
  border-radius: 0.3125rem;
  background-color: #fff;
  color: #ff6200;
}

.payBox {
  position: relative;
  margin: 1.5rem 1rem;
  background: #ffad5f;
  border-radius: 0.52rem;
  padding: 2rem 1rem;
  box-sizing: border-box;
  text-align: left;
  color: #fff;

  .spantxt {
    font-size: 1rem;
  }

  .price {
    margin-top: 1rem;
    font-size: 1.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.list {
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  background: #fff;
  padding-bottom: 3rem;

  .lis:last-child {
    border-bottom: none;
  }

  .lis {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid #eee;

    .left {
      flex: 1;
      height: 100%;
      text-align: left;

      .price {
        font-size: 1.1rem;
      }

      .typeTxt {
        color: #bdbdbf;
      }
    }

    .right {
      height: 100%;
      flex-shrink: 0;
      text-align: right;

      .ad {
        font-size: 1.1rem;
      }

      .statusTxt {
        color: #bdbdbf;
      }
    }
  }
}
</style>